<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="good.name" placeholder="商品名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="good.price" placeholder="商品价格"/>
      </el-form-item>
       <el-form-item>
          <el-select v-model="good.brandId" clearable placeholder="商品品牌">
              <el-option :value="1" label="海尔"/>
              <el-option :value="2" label="美的"/>
          </el-select>
      </el-form-item>
            <el-form-item label="添加时间">
              <el-date-picker
                v-model="good.begin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"/>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="good.end"
                type="datetime"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"/>
            </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <router-link to="/good/add">
        <el-button type="primary" icon="el-icon-search">添加</el-button>
      </router-link>

    </el-form>
    <!--数据显示列表-->
    <el-table :data="datalist" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="80" ></el-table-column>
      <el-table-column prop="price" label="价格" width="80" ></el-table-column>
      <el-table-column prop="num" label="数量" width="80" ></el-table-column>
      <el-table-column  label="品牌" width="150" >
        <template slot-scope="scope">
          <span>{{scope.row.brandParent}}-{{scope.row.brand}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="状态" width="80" >
        <template slot-scope="scop">
         <span>{{scop.row.status}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column  label="商品图片" width="100px" >-->
<!--        <template slot-scope="scope">-->
<!--          <img :src="scope.row.image" v-model="scope.row.image" width="100px">-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    dialog对话框-->



    <!--    分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[ 3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
//引入good
import good from '../../api/good'

export default {

  data(){
    return{
      good:{},         //品牌对象实体
      datalist:[],      //数据模型列表
      imgUrl:"",        //品牌图片的地址
      currentPage:1,   //当前页
      pageSize:2,      //每页显示多少条
      total:0,         //总记录数
      dialogBrandFormVisible:false, //添加或者修改的对话框
      form:{
        image:"",
      },           //对话框的对象
      brandParent:[],    //品牌的父id查询出来的Brand


    }
  },
  methods:{
    //清空条件框
    resetData(){
      this.brand={};
    },
    //点击修改
    handleEdit(id){
      //根据id查询数据
      brand.queryById(id).then(res=>{
        this.form=res.data;
        this.getBrandAll();

      });
      //显示弹窗
      this.dialogBrandFormVisible=true;
    },
    //点击删除
    handleRemove(id){
      //警示
      this.$confirm("是否确定删除？", "提示", {type: "warning"}).then(()=>{
        brand.removeById(id).then(res=>{
          this.$message.success(res.message);
          this.getList();
        })
      }).
      catch(()=>{
        this.$message.warning("取消")
      })

    },
    //每页显示多少条发生改变
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getList();
    },
    //当前页发生改变
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.getList();
    },
    //查询所有数据
    getList(value){
      //点击查询
      if (value==-1){
        this.currentPage=1;
      }
      good.getList(this.currentPage,this.pageSize,this.brand).then(res=>{
        console.log(res.data.data)
        //赋值
        this.datalist=res.data.data;
        this.total=res.data.total;
      })
    },
    //添加品牌
    handleToAdd(){
      //清空表单
      this.form={image:""};
      this.dialogBrandFormVisible=true;
      //显示所有的父品牌
      this.getBrandAll();
    },
    //图片上传成功
    handleAvatarSuccess(res, file){
      this.form.image ="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
      this.imgUrl="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
    },
    //图片允许的格式（上传之前）
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //提交添加或者修改的表单
    handleSubmit(){
      if (this.form.id !=null){
        //编辑
        brand.modify(this.form).then(res=>{
          this.$message.success(res.message);
          this.getList();
          //关闭
          this.dialogBrandFormVisible=false;
        })
      }
      else {
        //添加
        brand.add(this.form).then(res=>{
          this.$message.success(res.message);
          this.getList();
          //关闭
          this.dialogBrandFormVisible=false;
        })
      }
    },
    //下拉框改变
    change(){},
    //根据父id查询父品牌
    getBrandByParentId(parentId){
      brand.queryBrandByParentId(parentId).then(res=>{
        this.brandParent=res.data;
      })
    },
    //查询所有的父品牌
    getBrandAll(){
      brand.queryBrandAll().then(res=>{
        this.brandParent=res.data;
      })
    }

  },
  created() {
    this.getList();

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

